import { Component, Prop, State, Host, h, getAssetPath } from '@stencil/core';

@Component({
    tag: 'ibiz-image-gallery',
    styleUrl: 'ibiz-image-gallery.less',
    assetsDirs: ['assets'],
    shadow: true,
})
export class IbizImageGallery {
    /**
     * slider总个数
     */
    @Prop() total: number;

    items: any[] = [];

    img!: HTMLImageElement;

    swiper!: HTMLDivElement;

    isFullScreen: boolean = false;

    isForbidDoExit: boolean = false;

    @State() currentIndex: number = 0;

    constructor(){
        for(let i = 0,len = this.total; i < len ; i++){
            this.items.push("");
        }
    }

    /**
     * 组价加载完毕
     *
     * @memberof IBzWeekDayItem
     */
    public componentDidLoad(): void {
        window.addEventListener('resize', (e)=>{
            if(e.target !== e.currentTarget){
                return;
            }
            console.log("resize "+this.isForbidDoExit+" "+this.isFullScreen);
            if(this.isFullScreen){
                if(this.isForbidDoExit){
                    this.afterExitFullScreen();
                }else{
                    this.isForbidDoExit = true;
                    this.swiper.style.display = "block";
                }
            }
        });
    }

    public fullScreen(index: number) {
        console.log("fullScreen1")
        this.currentIndex = index;
        this.isFullScreen = true;
        var host: any = document.getElementById("ibiz-image-gallery");
        var element = host.shadowRoot.getElementById("fullscreen-swiper");
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullscreen();
        }
        console.log("fullScreen2")
    }

    public exitFullscreen() {
        var _document: any = document;
        if (_document.exitFullscreen) {
            _document.exitFullscreen();
        } else if (_document.msExitFullscreen) {
            _document.msExitFullscreen();
        } else if (_document.mozCancelFullScreen) {
            _document.mozCancelFullScreen();
        } else if (_document.webkitExitFullscreen) {
            _document.webkitExitFullscreen();
        }
    }

    public afterExitFullScreen(){
        console.log("afterExitFullScreen")
        this.swiper.style.display = "none";
        this.isForbidDoExit = false;
        this.isFullScreen = false;
        this.currentIndex = 0;
    }

    public preSlider(){
        if(this.currentIndex != 0){
            this.currentIndex--;
        }
    }

    public nextSlider(){
        this.currentIndex++;
    }

    render() {
        let slidersStyle = {
            transform: `translateX(-${this.currentIndex*100}%)`
        }
        return (
            <Host id="ibiz-image-gallery">
                {this.items.map((item: any, index: number) => {
                    return <img ref={(el) => this.img = el as HTMLImageElement} class="original-image" src={getAssetPath(`./assets/${index+1}.png`)} key={"originalImage" + index} onClick={(el) => {this.fullScreen(index)}}/>
                })}
                <div class="fullscreen-swiper" id="fullscreen-swiper" ref={(el) => this.swiper = el as HTMLDivElement}>
                    <div class="fullscreen-sliders" style={slidersStyle}>
                        {this.items.map((item: any, index: number) => {
                            return <div class="fullscreen-slider" onClick={el => { el.currentTarget == el.target ? this.exitFullscreen() : ""}}>
                                <div class="image-container">
                                    <img class="original-image" src={getAssetPath(`./assets/${index+1}.png`)} />
                                    <img class="button-fullScreen" src={getAssetPath("./assets/icons/icon-exit-fullscreen.png")} onClick={el => this.exitFullscreen()} />
                                    <img class="button-preSlider" src={getAssetPath("./assets/icons/icon-left-arrow.png")} onClick={el => this.preSlider()} />
                                    <img class="button-nextSlider" src={getAssetPath("./assets/icons/icon-right-arrow.png")} onClick={el => this.nextSlider()}>下一个</img>
                                </div>
                            </div>
                        })}
                    </div>
                </div>
            </Host>
        );
    }

}
